<template>
	<view class="box">
		<view class="box-content">
			<view class="title">
				<text>整改结果</text>
			</view>
			<view class="zgjg">
				<textarea v-model="value" height="300" placeholder="请输入..." disabledColor='#F6F6F6'
					style="background:#F6F6F6;margin-bottom: 30px;width: 100%!important;border-radius: 16rpx;padding: 24px;box-sizing: border-box;"></textarea>
			</view>
			<view class="title">
				<text>整改后照片</text>
			</view>
			<view class="uploading">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="4"></u-upload>
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" @click="submit" text="发送至验收人"></u-button>
		</view>
	</view>
</template>

<script>
	import { edit } from '../../api/yhzl.js'
	import {
		URL
	} from '../../api/request.js'
	export default {
		data() {
			return {
				value:'',
				obj:{},
				fileList1: [],
				imgUrl:'',
				state:2
			}
		},
		onLoad(obj) {
		this.obj = JSON.parse(obj.details)
		console.log(111,this.obj)
				},
		methods: {
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			//新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: URL + '/common/upload',
						filePath: url,
						name: 'file',
						header: {
							'Authorization': `Bearer ${uni.getStorageSync('token')}`
						},
						formData: {
							user: 'file'
						},
						success: (res) => {
							this.imgUrl = JSON.parse(res.data).url
							// console.log(this.imgUrl);
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			submit(){
				// console.log(this.obj.id);
				if(this.value == ''){
					uni.showToast({
						icon:'none',
						title:'整改结果不能为空'
					})
					return
				}
				if(this.imgUrl == ''){
					uni.showToast({
						icon:'none',
						title:'整改后照片不能为空'
					})
					return
				}
				const form ={
					id:this.obj.id,
					state:this.state,
					yhzgzp:this.imgUrl,
					zgjg:this.value
				}
				// console.log(form);
				edit(form).then((res) =>{
					// console.log(res);
					this.value = '',
					this.fileList1 = []
					uni.reLaunch({
						url:'/pages/home/home'
					})
					// console.log(123);
				})
			}
		}
	}
</script>

<style lang="scss">
.box{
	width: 100vw;
	height: calc(100vh - 88rpx);
	background-color: #F6F6F6;
	padding: 40rpx 24rpx 24rpx;
	box-sizing: border-box;
	.box-content{
		width: 702rpx;
		// height: 770rpx;
		padding: 32rpx 48rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 8rpx;
		margin-bottom: 40rpx;
		.title{
			font-size: 28rpx;
			color: #999;
			margin-bottom: 16rpx;
		}
		.zgjg{
			width: 606rpx;
			height: 300rpx;
			margin-bottom: 64rpx;
		}
		
	}
	.btn{
		width: 702rpx;
		height: 108rpx;
		.u-button{
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}
}
</style>
